<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>学生信息展示</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="web/js/jquery-3.5.1.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<style>
  .head{
    text-align: center;
    font-size: x-large;
    letter-spacing: 3px;
    font-weight: 500;
    margin-top: 30px;
    margin-top: 30px;
  }
  .table{
    height: 40%;
  }
</style>
<body>
<!--  <div class="head">-->
<!--    学生信息-->
<!--  </div>-->
  <table class="table" border="1" cellspacing="0" width="80%" align="center" >
    <caption>学生信息表</caption>
    <thead>
      <tr>
        <th>序号</th>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>出生日期</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for = "(item, index) in tableData" >
        <td>{{index}}</td>
        <td>{item.sid}}</td>
        <td>{{item.sname}}</td>
        <td>{{item.sex}}</td>
        <td>{{item.birthday}}</td>
      </tr>

    </tbody>
  </table>
</body>

<script>
  // $(function () {
  //   $.ajax({
  //       url:"/",
  //       async:true,
  //       data:"",
  //       type:"GET",
  //       dataType:"text",
  //       success:function (data) {
  //           console.log(data);
  //       },
  //       error:function () {
  //         alert("出错！")
  //       }
  //   })
  // })

  new Vue({
      el:"#app",
      data:"",
      created(){
        axios.get("/", {},
          then((response) =>{
              this.tableData = response.data.tableData;
          },
          function (error) {
              alert(error)
          })
        )
      },
  })

</script>
</html>